<template>
  <div>
    <el-dialog
      v-model="visable"
      class="exportModalBox"
      :title="title"
      width="40%"
      draggable
      :close-on-click-modal="false"
      style="max-width: 530px;"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="auto"
        :rules="formRules"
        style="width: 80%; margin: auto"
      >
        <el-col :span="24">
          <el-form-item label="字典类型编号:" prop="dicTypeCode">
            <el-input
              :disabled="isNotBlank(formData.dicTypeId)"
              v-model="formData.dicTypeCode"
              placeholder="字典类型编号"
              class="demoWidth"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="字典类型名称:" prop="dicTypeName">
            <el-input
              v-model="formData.dicTypeName"
              placeholder="字典类型名称"
              class="demoWidth"
              clearable
              :rows="3"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="字典类型排序:" prop="sqlText">
            <el-input
              v-model="formData.dicTypeSort"
              placeholder="字典类型排序"
              class="demoWidth"
              clearable
              :rows="3"
              type="number"
              :min="0"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述:" prop="descript:">
            <el-input
              v-model="formData.descript"
              placeholder="字典类型描述"
              clearable
              class="demoWidth"
              :rows="2"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="visable=false">取消</el-button>
          <el-button type="primary" size="small" @click="submit" >确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { addDictionaryType, updateDictionaryType, getDictionaryTypeById } from '@/api/system/dictionaryType'
import {isNotBlank, isBlank} from '@/constant/globalMethod.js'
let orgFormData = {
        dicTypeId: undefined,
        dicTypeCode: "",
        dicTypeName: "",
        dicTypeSort: "",
        descript: "",
      }
export default {
  data() {
    return {
      // 弹框标题
      title: "",
      // 弹框开关
      visable: false,
      // 弹框中form数据对象
      formData: {...orgFormData},
      // 弹框中form校验规则
      formRules: {
        dicTypeCode: [
          { required: true, trigger: "blur", message: "字典类型编号不能为空" },
        ],
        dicTypeName: [
          { required: true, trigger: "blur", message: "字典类型名称不能为空" },
        ],
      },
    };
  },
  methods:{
    openModal(row) {
      this.visable = true
      this.$nextTick(() => {
        this.formData = {...orgFormData}
        console.log("字典类型formData=",this.formData);
        if(this.isNotBlank(row.dicTypeId)){
          this.title = '数据字典类型修改'
          getDictionaryTypeById({'dicTypeId':row.dicTypeId}).then((res=>{
            if (res.code==1) {
              this.formData = {...res.data}
            }
          }))
        } else {
          this.title = '数据字典类型新增'
        }
        let val = this.formData.dicTypeId
        let flag = val && val != undefined && val != null && val != ""
        console.log("字典类型, id是否为空=",isNotBlank(val));
      })
    },
    submit(){
      this.$refs.formRef.validate((valid)=>{
        if (valid) {
          // 修改
          if (this.isNotBlank(this.formData.dicTypeId)) {
            updateDictionaryType(this.formData).then((res)=>{
              if (res.code==1) {
                this.visable = false
                this.$emit('flushTable',{})
              }
            })

          } else {
            // 新增
            addDictionaryType(this.formData).then((res)=>{
              if (res.code==1) {
                this.visable = false
                this.$emit('flushTable',{})
              }
            })
          }
        }
      })
    },

  },
};
</script>
<style></style>
